<template>
	<view>
		<!-- 展示已获得学分 -->
		<view class="top">
			<view class="score">已获学分：{{result}}分</view>
		</view>
		<!-- 具体课程数据 -->
		<view class="showData">
			<view class="flex-item-V uni-flex  score_show" v-for="(item,index) in rows" :key="item.id">
				<view class="score">{{item.zcj}}</view>
				<view class="show uni-bg-red">
					{{item.kcmc}}
					<view class="classify">
						{{item.xf}}学分 &nbsp;&nbsp;&nbsp;&nbsp;{{item.kcflmc}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				xnxqdm: '', // 学年学期
				rows: [], // 存储返回课程数据
			}
		},
		onLoad() {
			this.getScore()
		},
		methods: {
			async getScore() {
				const res = await this.$schoolRequest({
					url: '/xskccjxx!getDataList.action',
					method: 'POST',
					data: {
						xnxqdm: this.xnxqdm,
						jhlxdm: '02',
						page: 1,
						rows: 20,
						sort: 'xnxqdm,kcbh,ksxzdm',
						order: 'asc'
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'X-Requested-With': 'XMLHttpRequest',
						'Cookie': uni.getStorageSync("sessionid"),
					},
					success: (res) => {
						this.rows = res.data.rows
					},
					fail: (err) => {
						console.log(err)
					}
				})
			}
		},
		computed:{
			// 计算公选课获得学分
			result: function(){
				let sum = 0;
				for(let i = 0; i<this.rows.length;i++ ){
					sum += parseFloat(this.rows[i].xf)
				}
				return sum
			}
		}
	}
</script>

<style lang="scss">
	.top{
		height: 100rpx;
		.score{
			text-align: center;
			line-height: 100rpx;
		}
	}
	.showData {
		.score_show {
			.score {
				width: 20%;
				line-height: 140rpx;
				//margin: 50rpx auto;
				text-align: center;
			}

			.show {
				width: 80%;

				.classify {
					margin-top: 30rpx;
				}
			}
		}

		.uni-flex {
			display: flex;
			flex-direction: row;
		}

		.flex-item-V {
			width: 90%;
			height: 150rpx;
			margin: 10px auto;
			border: 1px solid $uni-bg-color-mask;
			border-radius: 10px;
		}

		.uni-bg-red {
			background: #F76260;
			color: #FFF;
		}
	}
</style>
